<template>
  <a-drawer
    :width="500"
    :visible="show"
    :footer="false"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> {{ data?.type }}组件编辑 </template>
    <div class="seting-box">
      <div class="setting-header items-center">
        <p class="item-title">组件高度(最小值: 1, 最大值: 2)</p>
        <a-slider
          v-model="data.columns"
          :min="1"
          :max="2"
          :default-value="2"
          show-input
        />
        <p class="item-title">Contact Person</p>
        <p v-if="!data.data.length">No items found.</p>
        <!-- <div>==={{ data.data }}</div> -->
        <draggable
          v-model="data.data"
          :component-data="{
            tag: 'div',
            type: 'transition-group',
            name: !drag ? 'flip-list' : null,
          }"
          v-bind="linkDragOptions"
          :disabled="false"
          @start="drag = true"
          @end="drag = false"
          item-key="id"
        >
          <template #item="{ element: link }">
            <div class="draggable_box">
              <!-- <div class="btn-group">
                <div class="drag-handle">
                  <icon-drag-arrow class="drag-icon" />
                </div>
                <icon-delete class="btn-delete" />
              </div> -->
              <div class="drag_top_box">
                <div @click="toggleCollapse(link)">
                  <icon-drag-dot style="margin-right: 10px" />{{ link.name }}
                </div>
                <div>
                  <icon-drag-arrow class="icon_drag" />
                  <icon-delete
                    class="btn-delete"
                    @click.stop="handleDelete(link.id)"
                  />
                </div>
              </div>
              <!-- {{ link }} -->
              <transition name="collapse">
                <div v-show="!isCollapsed(link)">
                  <p class="item-title" style="margin-top: 20px">Name</p>
                  <a-input
                    v-model="link.name"
                    placeholder="请输入标题"
                    allow-clear
                  />
                  <p class="item-title">Title</p>
                  <a-input
                    v-model="link.title"
                    placeholder="请输入标题"
                    allow-clear
                  />
                  <p class="item-title">Region</p>
                  <a-input
                    v-model="link.region"
                    placeholder="请输入标题"
                    allow-clear
                  />
                  <p class="item-title">Email</p>
                  <a-input
                    v-model="link.link"
                    placeholder="请输入标题"
                    allow-clear
                  />
                </div>
              </transition>

              <!-- <h6 class="contact-us-list__item__name">{{ link.name }}</h6>
              <p class="contact-us-list__item__title">{{ link.title }}</p>
              <div class="contact-us-list__item__region">
                {{ link.region }}
              </div>
              <div class="contact-us-list__item__link">
                <div class="icon-link icon-link--md">
                  <a
                    href="mailto:111"
                    target="_blank"
                    class="icon-link__wrapper"
                    ><span
                      class="icon-link__icon"
                      :style="{ '--icon-url': `url(${iconEmailUrl})` }"
                    ></span>
                    <div class="icon-link__text">
                      <span>{{ link.link }}</span>
                    </div></a
                  >
                </div>
              </div> -->
            </div>
          </template>
        </draggable>
        <a-button type="primary" @click="handleClickAdd">
          <template #icon>
            <icon-plus />
          </template>
          联系人
        </a-button>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick, defineAsyncComponent } from "vue";
import { randomString } from "@/utils/common";

// 动态导入 draggable，避免 SSR 问题
const draggable = defineAsyncComponent(() => import("vuedraggable"));
// 不同类型的拖拽配置选项
const linkDragOptions = computed(() => ({
  animation: 200,
  group: "links", // 链接专用分组
  disabled: false,
  ghostClass: "ghost",
}));
// 拖拽相关状态
const drag = ref(false);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },

  data: {
    type: Object,
    default: () => {},
  },
});

// 折叠状态管理 - 使用Set存储已折叠项的ID
const collapsedItems = ref(new Set());

// 切换指定项的折叠状态
const toggleCollapse = (item: any) => {
  if (collapsedItems.value.has(item.id)) {
    collapsedItems.value.delete(item.id);
  } else {
    collapsedItems.value.add(item.id);
  }
};
const handleDelete = (id: string) => {
  props.data.data = props.data.data.filter((item: any) => item.id !== id);
};
const handleClickAdd = () => {
  const detail = props.data;
  detail.data.push({
    name: "New Contact",
    title: "",
    region: "",
    link: "",
    id: randomString(),
  });
  nextTick(() => {
    const drawerContent = document.querySelector(".arco-drawer-body");
    if (drawerContent) {
      drawerContent.scrollTop = drawerContent.scrollHeight;
    }
  });
};

// 检查指定项是否已折叠
const isCollapsed = (item) => {
  return collapsedItems.value.has(item.id);
};

const emit = defineEmits(["update:show"]);

const handleCancel = () => {
  emit("update:show", false);
};

// 检查是否应该显示拖拽图标
const shouldShowDragHandle = (list: any[]) => {
  return list && list.length > 1;
};
</script>

<style lang="scss" scoped>
.icon_drag {
  margin-right: 15px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
}
.drag_top_box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: space-between;
  padding: 8px;
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 4px;

  &:hover {
    background-color: #e8e8e8;
  }
}

// 折叠动画
.collapse-enter-active,
.collapse-leave-active {
  transition: all 0.3s ease;
  max-height: 500px;
  overflow: hidden;
  opacity: 1;
}

.collapse-enter-from,
.collapse-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.draggable_box {
  margin-bottom: 25px;
  background: #fff;
  padding: 10px;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  &:hover {
    transform: translateY(-2px);
  }
}
// :deep(.arco-input-wrapper) {
//   background-color: #ffffff;
// }
.item-title {
  padding: 12px 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
}
.item-img {
  height: 100px;
}
.seting-box {
  padding: 20px;
  background: #f0f2f5;
  border-radius: 3px;
  // .arco-input-wrapper {
  //   background: #ffffff;
  // }
}
.setting-content {
  .setting-header {
    padding-bottom: 12px;

    .header-title {
      width: 120px;
      padding-right: 12px;
      text-align: right;
    }
  }

  .setting-body {
    margin-top: 12px;

    .setting-item {
      position: relative;
      padding: 16px 12px;
      background: #f0f2f5;
      border-radius: 8px;
      margin-bottom: 20px;

      .btn-group {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        padding: 4px;

        .btn-delete {
          padding: 4px;
          font-size: 24px;
          cursor: pointer;
        }
      }

      .item-name {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid #fff;
      }

      .item-title {
        padding: 12px 0 8px 0;
        font-size: 14px;
        font-weight: 600;
      }

      .arco-input-wrapper {
        background: #fff;
      }

      .item-button {
        position: relative;
        padding: 12px 8px 4px;
        background: #fff;
        border-radius: 4px;
        margin: 4px 0;
        transition: all 0.3s ease;

        &.draggable-item {          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
          }

          // 当禁用拖拽时，不显示拖拽效果
          &.sortable-disabled {
            cursor: default;

            &:hover {
              box-shadow: none;
              transform: none;
            }
          }
        }

        .arco-input-wrapper {
          background: #f2f3f5;
        }
      }

      // 拖拽相关样式
      .flip-list-move {
        transition: transform 0.5s;
      }

      .no-move {
        transition: transform 0s;
      }

      .ghost {
        opacity: 0.5;
        background: #c8ebfb;
      }

      .list-group {
        min-height: 20px;
      }

      .list-group-item {      }

      .list-group-item i {
        cursor: pointer;
      }

      .item-action {
        padding: 10px 0;

        .action-text {
          width: 150px;
          margin-right: 8px;
        }
      }

      .item-add-btn {
        display: inline-block;
        padding: 2px 8px;
        margin-top: 5px;
        font-size: 11px;
        color: #165dff;
        border-radius: 4px;
        font-weight: 600;
        border: 1px solid #165dff;
        cursor: pointer;
      }

      .item-img {
        margin-top: 12px;
        height: 160px;
      }

      .fit-content {
        width: fit-content;
      }

      .item-img-list {
        .img-list-item {
          margin: 4px 0;
          position: relative;
          padding: 8px;
          border-radius: 4px;
          transition: all 0.3s ease;
          background: #fff;
          border-radius: 4px;

          &.draggable-item {            &:hover {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              transform: translateY(-1px);
            }

            // 当禁用拖拽时，不显示拖拽效果
            &.sortable-disabled {
              cursor: default;

              &:hover {
                box-shadow: none;
                transform: none;
              }
            }
          }

          .arco-input-wrapper {
            background: #f2f3f5;
          }

          .img-drag-handle {
            top: 0 !important;
          }
        }

        .item-img-box {
          margin-right: 12px;
          position: relative;
          width: 133px;
          height: 100px;

          .item-img-dlete {
            position: absolute;
            padding: 8px;
            font-size: 32px;
            top: -16px;
            right: -16px;
            color: red;
            cursor: pointer;
          }
        }

        .small-img {
          margin: 0;
          height: 100px;
          object-fit: cover;
        }

        .item-right {
          padding-top: 24px;
        }
      }
    }
  }

  .drag-handle {
    padding: 4px;
    cursor: grab;
    padding: 4px;
    border-radius: 4px;

    &:hover {
      background-color: #f0f2f5;
    }

    &:active {
      cursor: grabbing;
    }

    .drag-icon {
      font-size: 16px;
      color: #86909c;
    }
  }
}
</style>
